<template>
	<div id="home">
		<main class="main">
			<!-- <div class="banner1-item one" v-if="isshow1"></div>
				<div class="banner1-item two" v-else></div> -->
			<div class="banner1">
				<img :src="imgs[0]" alt="" class="banner1-item">
			</div>
			<div class="introduce">
				<h1 class="introduce-title">
					欢迎来到正荣洁家
				</h1>
				<div class="introduce-content">
					<div class="introduce-item">
						<img src="../assets/images/1.png" alt="" class="introduce-item_img">
						<h2 class="introduce-item_title">
							设计团队
						</h2>
						<div class="introduce-item_content">
							是一家集研发、设计、生产、销售、服务为一体的专业性整体木作企业，在高端装修领域，拥有行业内超强产品结构研发，色彩美学和技术深化、工程服务的团队。
						</div>
					</div>
					<div class="introduce-item">
						<img src="../assets/images/2.png" alt="" class="introduce-item_img">
						<h2 class="introduce-item_title">
							工艺材料
						</h2>
						<div class="introduce-item_content">
							公司引进全新的工艺及生产设备，进行高端实木墙板、柜体、楼梯、原木门等产品的生产和销售，产品均以 进口木料为原材料，进行实木、原木产品加工。
						</div>
					</div>
					<div class="introduce-item">
						<img src="../assets/images/3.png" alt="" class="introduce-item_img">
						<h2 class="introduce-item_title">
							高速发展
						</h2>
						<div class="introduce-item_content">
							目前在全国已拥有烟台、淄博、东营、青岛、临沂、镇江等十余家经销商。与万科、富力等多家国内大型房地产企业有着良好的合作关系。
						</div>
					</div>
					<div class="introduce-item">
						<img src="../assets/images/4.png" alt="" class="introduce-item_img">
						<h2 class="introduce-item_title">
							服务保障
						</h2>
						<div class="introduce-item_content">
							经过几年的发展，森勒已形成稳定的产品体系和质量标准，公司成立以来，已为上千位业主提供了高品质整木定制服务。
						</div>
					</div>
				</div>
			</div>
			<div class="banner2">
				<div class="banner2-center">
					<h2 class="banner2-title">
						<span class="block">
							关于正荣洁家
						</span>
					</h2>
					<div class="banner2-bottom" v-if="isshow1">
						<div class="banner2-bottom_item">
							描述事迹所获奖项。。。。。
						</div>
						<h3 class="banner2-bottom_title">
							公司简介
						</h3>
					</div>
					<div class="banner2-bottom" v-else>
						<div class="banner2-bottom_item">
							真材实料，精工细作是我们的郑重承诺。<br />
							坚持做中国整木行业领军品牌是我们的目标。<br />
							引领原木整装文化，承载舒适家居梦想是我们的使命。<br />
							以人为本，质量为先，不断创新，诚信共赢是我们的经营理念
						</div>
						<h3 class="banner2-bottom_title">
							企业精神
						</h3>
					</div>
				</div>
			</div>
			<div class="case">
				<h2 class="case-title">
					近期案例
				</h2>
			</div>
			<div class="news">
				<h2 class="news-title">
					新闻动态
				</h2>
				<button class="btn">
					<router-link to="/news">
						了解更多
					</router-link>
				</button>
			</div>
		</main>
	</div>
</template>

<script>
	import {
		searchImage
	} from "@/utils/api.js"
	export default {
		data() {
			return {
				isshow1: true,
				imgs: [],
			}
		},
		created() {
			this.getImage();
		},
		methods: {
			getImage() {
				searchImage().then(response => { // .then 字面意思 然后
					console.log(response.data)
					this.imgs = response.data.map(item => item.url)

				})
			}
		},
		mounted() {
			setInterval(() => {
				let img = this.imgs.shift();
				this.imgs.push(img);
			}, 5000)
		}
	}
</script>

<style lang="less" scoped>
	#home {
		border-top: 1px solid #eee;
		display: flex;
		justify-content: center;
	}

	.main {
		width: 100%;
		box-sizing: border-box;
	}

	.banner1 {
		height: 651px;
		margin: 0 auto;
		width: 1863px;
		border-bottom: 1px solid #ccc;
	}

	.banner1-item {
		height: 650px;
	}

	.one {
		background-color: red;
	}

	.two {
		background-color: green;
	}

	.introduce {
		width: 1200px;
		margin: 0 auto;
	}

	.introduce-content {
		display: flex;
		justify-content: space-between;
	}

	.introduce-title {
		text-align: center;
		font-size: 30px;
		color: #999;
		font-weight: 200;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.introduce-item {
		width: 290px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.introduce-item_img {
		width: 100px;
		height: 100px;
	}

	.introduce-item_title {
		margin: 10px 0px 20px;
		color: #777;
		font-size: 20px;
	}

	.introduce-item_content {
		line-height: 1.5em;
		color: #777;
	}

	.banner2 {
		background: url(../assets/images/banner03.jpeg);
		height: 400px;
		padding: 60px 0px;
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}

	.banner2-center {
		width: 1200px;
		height: 400px;
	}

	.banner2-title {
		color: #ccc;
		font-weight: 200;
		text-align: center;
	}

	.block {
		font-size: 33px;
		display: inline-block;
		position: relative;
		width: 200px;
		border-bottom: 2px solid #fff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		padding-bottom: 5px;
	}

	.block::after {
		content: "";
		position: absolute;
		bottom: -12px;
		left: 95px;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #fff;
	}

	.banner2-bottom {
		width: 900px;
		margin: 0 auto;
		margin-top: 50px;
		color: #fff;
		font-size: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.banner2-bottom_item {
		text-align: center;
		font-style: italic;
		margin-bottom: 50px;
		font-weight: 700;
	}

	.banner2-bottom_title {
		font-weight: 400;
		font-size: 24px;
	}

	.case {
		padding: 50px 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f9f9f3;
		;
	}

	.case-title {
		font-size: 24px;
		color: #666;
		font-weight: 400;
	}

	.news {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
	}

	.news-title {
		margin-bottom: 50px;
		color: #555;
		font-size: 30px;
		font-weight: 400;
	}

	.btn {
		padding: 10px 20px;
		outline: none;
		border: none;
		background-color: #37BC9B;
		color: #fff;
		font-size: 18px;
		border-radius: 5px;
	}

	a {
		color: #fff;
	}

	a:hover {
		text-decoration: none;
	}
</style>
